<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户列表</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!--    <link th:href="@{/s/css/bootstrap.css}" rel="stylesheet">-->
</head>
<body>
<div class="container">
    <div class="row gy-5">
        <div class="col p-2">
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">
                        <img th:src="@{/s/img/cover.png}">
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page" href="#">home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                   data-bs-toggle="dropdown" aria-expanded="false">
                                    Dropdown
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="#">Action</a></li>
                                    <li><a class="dropdown-item" href="#">Another action</a></li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    </div>
                </div>
            </nav>

        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row gy-5">
                <div class="col p-2">
                    <div class="card" style="top: 10px;">
                        <div class="card-header">
                            用户列表
                            <p class="text-end"><a th:href="@{/user/add}">添加</a></p>
                        </div>
                        <div class="card-body">
                            <table class="table table-hover" style="text-align: center;vertical-align: middle;">
                                <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col">用户名称</th>
                                    <th scope="col">余额</th>
                                    <th scope="col">性别</th>
                                    <th scope="col">年龄</th>
                                    <th scope="col">电话号码</th>
                                    <th scope="col">创建日期</th>
                                    <th scope="col">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                <tr th:each="user:${pageInfo.list}">
                                    <!--/*@thymesVar id="user" type="com.zxm.ssm.entity.User"*/-->
                                    <th th:text="${user.id}"></th>
                                    <td th:text="${user.username}" style="max-width: 200px;"></td>
                                    <th th:text="${user.money}" style="max-width: 250px;"></th>
                                    <td th:if="${user.gender} eq 1">女</td>
                                    <td th:if="${user.gender} eq 0">男</td>
                                    <th th:text="${user.age}"></th>
                                    <td th:text="${user.phone}"></td>
                                    <th th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"
                                        style="max-width: 250px;"></th>

                                    <td style="width: 100px">
                                        <a th:href="@{${'/user/edit?id='+user.id}}" title="编辑">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                 fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
                                                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                                                <path fill-rule="evenodd"
                                                      d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
                                            </svg>
                                        </a>&nbsp;
                                        <a th:href="@{${'/user/del?id='+user.id}}" title="删除"
                                           onclick="delConfirm(event,this.href)">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                 fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                                                <path fill-rule="evenodd"
                                                      d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                                            </svg>
                                        </a>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                        <div class="card-footer">
                            <nav aria-label="...">
                                <ul class="pagination">
                                    <li class="page-item " th:classappend="${pageInfo.isFirstPage}? 'disabled'">
                                        <a class="page-link" href="#"
                                           th:href="@{${'/user/list?pageNum='+(pageInfo.pageNum-1)}}" tabindex="-1"
                                           aria-disabled="true">&laquo;</a>
                                    </li>
                                    <li class="page-item" th:each="p:${pageInfo.navigatepageNums}"
                                        th:classappend="${p==pageInfo.pageNum}? 'active'"><a class="page-link" href="#"
                                                                                             th:href="@{${'/user/list?pageNum='+p}}"
                                                                                             th:text="${p}">1</a></li>
                                    <li class="page-item " th:classappend="${pageInfo.isLastPage}? 'disabled'">
                                        <a class="page-link" href="#"
                                           th:href="@{${'/user/list?pageNum='+(pageInfo.pageNum+1)}}" tabindex="-1"
                                           aria-disabled="true">&raquo;</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row gy-5">
        <div class="col p-2">
            <div class="card" style="top: 10px;">
                <div class="card-body">
                    <p class="text-center">wry版权所有&copy;</p>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!--弹窗-->
<!-- Modal -->
<div class="modal fade " id="delConfirmDlg">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">删除确认</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                是否确认删除
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="dlgDelConfirm">确认</button>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
<script>
    function delConfirm(event, href) {
        //取消超级链接的默认行为
        event.preventDefault();
        // if (window.confirm("是否确认删除？")){
        //   window.location.href = href;
        // }
        new bootstrap.Modal(document.getElementById('delConfirmDlg'), {}).show();
        //document.getElementById("delConfirmDlg").show();
        document.getElementById("dlgDelConfirm").addEventListener("click", function () {
            window.location.href = href;
        })
    }
</script>

</body>
</html>